<html>
<head>
<title>${TITLE}</title>
<link href="doc.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['orgchart']});
</script>
<script type="text/javascript">

  // don't show internals by default
  var displayInternals = false;

  var toggleInternals = function() {
    
    // toggle the display variable
    displayInternals = !displayInternals;

    if (!document.styleSheets)
      return;
    var thecss = new Array();
    
    if (document.styleSheets[0].cssRules) thecss = document.styleSheets[0].cssRules;
    else thecss = document.styleSheets[0].rules;
    
    for (i = 0; i < thecss.length; i++) {
      
      if (thecss[i].selectorText.toLowerCase() == '.private') {
        
        if (displayInternals) {
          thecss[i].style.cssText += "display: block;";
          document.getElementById('togglBtn').innerHTML = 'Hide Internals'
        } else {
          thecss[i].style.cssText += "display: none;";
          document.getElementById('togglBtn').innerHTML = 'Show Internals'
        }
      
      } else if (thecss[i].selectorText.toLowerCase() == '.private_quicklink') {
        
        if (displayInternals) {
          thecss[i].style.cssText += "display: inline;";
        } else {
          thecss[i].style.cssText += "display: none;";
        }
        
      }
       
    }
    
  }
  
  function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      ${DIAGRAM}
    ]);
  
    // Create and draw the visualization.
    new google.visualization.OrgChart(document.getElementById('diagram')).
        draw(data, {allowHtml: true, size:'small', color:'#f3f3f3'});
  }
  

  google.setOnLoadCallback(drawVisualization);  
  
</script>
</head>

<body>
	<h1>${TITLE}</h1>
	<div class="menu">${MENU}</div>
	<div id="diagram"></div>
	<div class="content">
		<h2>${CLASSNAME}</h2>
		${CONTENT}
	</div>

  <div id="toolbox">
  <center><button id="togglBtn" type="button" onclick="javascript:toggleInternals();">Show Internals</button></center><br><br>
  <b>CONSTRUCTORS</b><br>
  ${CONSTRUCTORS}<br>
  <b>PROPERTIES</b><br>
  ${PROPERTIES}<br>
  <b>GETTERS/SETTERS</b><br>
  ${GETTERSSETTERS}<br>
  <b>FUNCTIONS</b><br>
  ${FUNCTIONS}<br>
  <b>STATIC</b><br>
  ${STATIC}<br><br><br>
  <center><small><a href="${SOURCELINK}" target="_blank">SOURCECODE</a><br></small></center>
  </div>	
	
	<br><br><br>
</body>

</html>